<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ===== 引入 ===== -->
    <link rel="stylesheet" href="assets/css/styles.css">

    <title>事件分类管理</title>
</head>
<style>
    /*===== 谷歌字体 =====*/
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

    /*===== css变量老师家哦 =====*/
    :root {
        --first-color: #0C5DF4;
        --bg-color: #F5F5F5;
        --sub-color: #B6CEFC;
        --white-color: #FFF;

        /*===== 规定字体  =====*/
        --body-font: 'Poppins', sans-serif;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
    }

    /*===== 基础规定 =====*/
    *, ::before, ::after {
        box-sizing: border-box;
    }
    body {
        position: relative;
        margin: 0;
        padding: 2rem;
        font-family: var(--body-font);
        font-size: var(--normal-font-size);
        background-color: var(--bg-color);
        transition: .5s;
    }
    h1 {
        margin: 0;
        text-align: center;
        color: var(--first-color);
    }
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a {
        text-decoration: none;
    }

    .content {
        position: relative;
        width: 100%;
        min-height: calc(100vh - 4rem); /* 减去顶部和底部的padding */
        overflow: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .header-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 1200px;
        margin-bottom: 20px;
        align-items: center;
    }

    .search-container {
        display: flex;
        align-items: center;
    }

    .search-container input[type="text"] {
        width: 300px;
        padding: 8px 12px;
        margin-right: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .search-container button {
        padding: 8px 16px;
        background-color: var(--first-color);
        color: var(--white-color);
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .search-container button:hover {
        background-color: darken(var(--first-color), 10%);
    }

    .add-button-container {
        display: flex;
        align-items: center;
    }

    .add-button {
        padding: 8px 16px;
        background-color: var(--first-color);
        color: var(--white-color);
        border: none;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: background-color 0.3s ease;
    }

    .add-button:hover {
        background-color: darken(var(--first-color), 10%);
    }

    .add-button i {
        margin-right: 5px;
        font-size: 1.2em;
    }

    .table-container {
        width: 100%;
        max-width: 1200px;
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    th, td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    th {
        background-color: var(--first-color);
        color: var(--white-color);
    }

    tr:hover {
        background-color: #f1f1f1;
    }

    .error-message {
        color: red;
        text-align: center;
        margin-bottom: 20px;
        width: 100%;
        max-width: 1200px;
    }

    .success-message {
        color: green;
        text-align: center;
        margin-bottom: 20px;
        width: 100%;
        max-width: 1200px;
    }

    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        width: 100%;
        max-width: 1200px;
        margin-top: 20px;
    }

    .card {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 300px;
        padding: 20px;
        text-align: center;
        transition: transform 0.3s ease;
    }

    .card:hover {
        transform: translateY(-10px);
    }

    .card input[type="text"] {
        width: 70%;
        padding: 8px;
        margin-right: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .card button {
        padding: 8px 16px;
        background-color: var(--first-color);
        color: var(--white-color);
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .card button:hover {
        background-color: darken(var(--first-color), 10%);
    }

    form.inline-form {
        display: inline-block;
        margin-right: 5px;
    }
    /* 增加字体加粗 */
    .add-button {
        font-weight: bold; /* 使按钮文字变粗 */
        position: relative; /* 为伪元素定位 */
        padding-left: 20px; /* 为伪元素内容预留空间 */
    }

    /* 确保加号图标正确显示 */
    .add-button i {
        margin-right: 5px;
        font-size: 1.2em;
    }

    .add-button::before {
        content: "+ "; /* 在按钮前添加加号符号 */
        font-weight: bold; /* 使加号符号加粗 */
        position: absolute; /* 绝对定位 */
        left: 10px; /* 距离左边的距离 */
    }
    /* 删除按钮样式 */
    .delete-button {
        background-color: #dc3545; /* 红色背景 */
        color: var(--white-color); /* 白色文字 */
        border: none;
        border-radius: 5px;
        padding: 8px 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        position: relative; /* 为伪元素定位 */
        font-weight: bold; /* 加粗字体 */
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: var(--normal-font-size);
    }

    .delete-button::before {
        content: "⚠ "; /* 在按钮前添加警告符号 */
        font-weight: bold; /* 使警告符号加粗 */
    }

    .delete-button:hover {
        background-color: #c82333; /* 深红色背景，鼠标悬浮时 */
    }

    /* 编辑按钮样式 */
    .edit-button {
        background-color: #28a745; /* 绿色背景 */
        color: var(--white-color); /* 白色文字 */
        border: none;
        border-radius: 5px;
        padding: 8px 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        position: relative; /* 为伪元素定位 */
        font-weight: bold; /* 加粗字体 */
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: var(--normal-font-size);
    }

    .edit-button:hover {
        background-color: #218838; /* 深绿色背景，鼠标悬浮时 */
    }

</style>
<body>
<div class="content">
    <% if (request.getAttribute("categoryError") != null) { %>
    <div id="error-message"><%= request.getAttribute("categoryError") %></div>
    <% } %>
    <h1>事件分类管理</h1>
    <div class="error-message">${message}</div>
    <div class="success-message">${success ? '操作成功' : ''}</div>
    <div class="header-container">
        <div class="add-button-container">
            <!-- 修改了form标签，现在它包含了一个隐藏的input元素 -->
            <form action="${pageContext.request.contextPath}/user/addcategory" method="post" class="inline-form" id="addCategoryForm">
                <input type="text" name="categoryName" id="categoryName" style="display:none;" required>
                <button type="submit" class="add-button" onclick="promptForCategory(event)">
                    <i class="ion-ios-add"></i> 新增事件类型
                </button>
            </form>
        </div>
        <div class="search-container">
            <form action="${pageContext.request.contextPath}/user/doSearch" method="get">
                <input type="text" name="searchName" placeholder="搜索事件分类...">
                <button type="submit">搜索</button>
            </form>
        </div>
    </div>
    <div class="table-container">
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>分类名称</th>
                <th>&nbsp;&nbsp;创建时间</th>
                <th>&nbsp;&nbsp;操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="category" items="${categoryList}" varStatus="status">
                <tr>
                    <td>${status.index + 1}</td>
                    <td>&nbsp;&nbsp;${category.categoryName}</td>
                    <td><fmt:formatDate value="${category.createdAt}" pattern="yyyy年MM月dd日"/></td>
                    <td>
                        <form action="${pageContext.request.contextPath}/user/editCategory?categoryId=${category.categoryId}" method="post" class="inline-form">
                            <button type="submit" class="edit-button">编辑</button>
                        </form>
                        <form action="${pageContext.request.contextPath}/user/deletecategory?categoryId=${category.categoryId}" method="post" class="inline-form" onsubmit="return confirm('确定要删除该事件类型吗？');">
                            <button type="submit" class="delete-button">删除</button>
                        </form>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>

    window.onload = function () {
        var errorMessage = document.getElementById('error-message');
        if (errorMessage) {
            alert(errorMessage.textContent);
        }
    };

    function promptForCategory(event) {
        event.preventDefault(); // 阻止表单默认提交行为
        // 弹出提示框获取用户输入
        var categoryName = prompt("请输入类型的名字:");
        // 检查用户是否点击了取消
        if (categoryName === null) {
            // 用户点击了取消，不执行任何操作
            return; // 直接返回，不执行后面的代码
        }
        // 检查用户是否输入了名称且名称不为空
        if (categoryName.trim() !== '') {
            var categoryInput = document.getElementById('categoryName');
            if (categoryInput) {
                categoryInput.value = categoryName;
                categoryInput.style.display = 'none'; // 确保输入框不可见
                document.getElementById('addCategoryForm').submit(); // 提交表单
            } else {
                console.error('元素不存在:', 'categoryName');
            }
        } else {
            // 用户输入了空字符串，显示提示
            alert("分类名称不能为空，请重新输入。");
        }
    }
</script>
</html>